import News from "./news";
import {useState,createContext} from "react";




//创建context对象时首字母必须大写因为这是一个组件，在react中组件标签是必须大写的
const Mycontent = createContext()



function Parent () {
    //用于父子组件
    let [count,setCount] = useState(0)
    //用于跨组件
    return(
        <div>
            <div style={{
                border:'1px solid'
            }}>
                <h1>使用context来进行父子组件之间的传值</h1>
                <p>案例：</p>
                <p>计数器：{count}</p>
                <p><button onClick={ () => setCount(count+1) }>click</button></p>
                {/*
                Mycontent.Provider相当于一个提供器，你要传什么值就在value中使用
                可以用于父子组件传值，以及跨组件传值
                当然value的值可以是任意类型的
                基础数据类型以及引用数据类型都是可以的
                如果是父子组件传值推荐使用props来传值
                跨组件传值推荐使用context来传值
                */}
                < Mycontent.Provider value={count} >
                    <News/>
                </Mycontent.Provider>
            </div>
        </div>
    )
}
export {
    Parent,
    Mycontent
}